<template>
	<view class="default-box">
		<!-- TODO  缺省页样式未完善 -->
		<view class="default-content">
			<image :src="defaultInfo.url || 'https://bicpic.baikewang.com/images/1646994256440.png'" mode="widthFix"></image>
			<view :style="defaultInfo.textStyle">{{ defaultInfo.text || '暂无数据' }}</view>
			<view class="btn" v-if="defaultInfo.showBtn" @click="clickBtn">
				<slot>重新加载</slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'defaultModule',
	props: {
		defaultInfo: {
			type: Object,
			default: function () {
				return {
					url: '',
					text: '',
					showBtn: true,
					textStyle:()=>{}
				};
			}
		},
	},
	data() {
		return {};
	},
	methods:{
		clickBtn(){
			this.$emit('clickBtn')
		}
	}
};
</script>

<style lang="scss" scoped>
.default-box {
	width: 100%;
	height: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0 60rpx;
	box-sizing: border-box;
}
.default-content {
	text-align: center;
	color: $font-color-light;
	font-size: $font-size-E;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: $btn-xs-width;
	height: $btn-xs-height;
	background: $primary-btn-bg;
	border-radius: $btn-xs;
	font-size: $font-size-D;
	color: #ffffff;
	margin-top: 32rpx;
	padding: 0 46rpx;
	box-sizing: border-box;
}
</style>
